<!--
 * @Descripttion:
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-18 13:45:27
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-25 13:46:50
-->
<template>
	<div class="register">
		<div class="header">
			<div class="logo-con set-flex">
				<!-- <a class="logo" ></a> -->
				<router-link class="logo" :to="{path: '/agshop'}"></router-link>
				<div class="logo-title">欢迎注册</div>
			</div>
		</div>
		<div class="register-body">
			<div class="typeView">
				<div class="item" :class="tabIndex == 1?'active':''" @click="changeNav(1)">采购用户/组织</div>
				<div class="item" :class="tabIndex == 2?'active':''" @click="changeNav(2)">供货组织</div>
			</div>
			<el-form :label-position="'right'" :rules="rules" label-width="120px" :model="form" label-suffix=":"
				ref="form">
				<el-row>

					<!-- <el-form-item
			  class='form-box-label'
			  label='组织机构选择'
			  prop='orgId'>
			  <el-cascader
			    :options='purchaserOrgAll'
			    :props="{ value: 'id', label: 'name', checkStrictly: 'true' }"
			    v-model='form.orgId'
			    :show-all-levels='false'>
			  </el-cascader>
			</el-form-item> -->

					<el-col :span="12">
						<el-form-item label="用户名" prop="account">
							<el-input v-model.trim="form.account" placeholder="请输入"></el-input>
							<p style="color: red;" v-if="tabIndex == 1">*鞍钢集团员工请填写8位钢通卡卡号</p>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="密码" prop="password">
							<el-input v-model.trim="form.password" placeholder="请输入" type="password"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="姓名" prop="name">
							<el-input v-model.trim="form.name" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="电话号码" prop="tel">
							<el-input v-model.trim="form.tel" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="传真号码" prop="fax">
							<el-input v-model.trim="form.fax" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号码" prop="mobile">
							<el-input v-model.trim="form.mobile" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="电子邮箱" prop="email">
							<el-input v-model.trim="form.email" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item el-form-item label="编码">
							<el-input v-model.trim="form.UKEY" placeholder="请输入"></el-input>
							<p style="color: red;" v-if="tabIndex == 1">*请再次填写8位钢通卡号，无钢通卡无需填写</p>
						</el-form-item>
					</el-col>
					<!--          <el-col :span="12">-->
					<!--            <el-form-item el-form-item label="是否有效">-->
					<!--              &lt;!&ndash; 1 有效 0 无效 &ndash;&gt;-->
					<!--              <el-radio v-model="form.status" label="1">是</el-radio>-->
					<!--              <el-radio v-model="form.status" label="0">否</el-radio>-->
					<!--            </el-form-item>-->
					<!--          </el-col>-->
				</el-row>
			</el-form>
			<div class="action">
				<el-button type="primary" class="submit" @click="registerEvent">完成注册</el-button>
			</div>
			<div class="login">
				<router-link :to="{path:'/login'}">
					已有账号，请登录 <i class="el-icon-arrow-right"></i>
				</router-link>
			</div>

			<el-dialog :visible='dialogVisible2' title="温馨提示" :show-close="false">
				<div class="introduce">
					<div v-if="tabIndex == 1">
						<p class="title">温馨提示</p>
						<p class="content">
							尊敬的客户您好，您的账户已创建完毕。请提供相关手续完成后续注册流程。包括所属组织机构、部门名称，审批流（下单人、审批人）信息。您可拨打客服电话，平台客服会协助您完成后续注册流程。</p>
						<div style="width: 100%;height:1px;background: #ccc;margin: 20px auto;"></div>
						<p class="title">采购用户注册流程</p>
						<p class="content">用户自行注册->注册完成登录平台->点击首页右上方工作台->进入后台管理->点击资质申请->采购人申请->下载授权委托书文件</p>
						<p class="content">将资质文件填写完成并加盖公章提交给平台。平台会为您完善其他信息，包括组织部门名称、分配角色以及绘制审批流。</p>
					</div>
					<div v-if="tabIndex == 2">
						<p class="content">尊敬的客户您好，您的账户已创建完毕。</p>
						<div style="width: 100%;height:1px;background: #ccc;margin: 20px auto;"></div>
						<p class="title">供应商注册流程</p>
						<p class="content">用户自行注册->注册完成登录平台->点击首页右上方工作台->进入后台管理->点击资质申请->供应商申请->输入您所在单位名称</p>
						<p class="content">如果有您的单位名称，会提示您此供应商已注册，请联系平台客服帮您加入该供应商。</p>
						<p class="content">如果没有您的单位名称，您需要输入完整信息，并提交至平台进行审核。审核通过后您就成为平台的供应商了。如果审核未通过需要您重新完善信息，再次提交。</p>
					</div>
					<div v-if="tabIndex == 1">
						<center><el-button @click="downloadFile" type="primary"
								style="margin-top: 30px;">授权委托书下载</el-button></center>
					</div>
					<div>
						<center>
							<el-button @click="closeIt" type="default" style="margin-top: 30px;margin-right:20px;">关闭</el-button>
							<router-link :to="{path:'/login'}">
								<el-button type="primary" style="margin-top: 30px;">去登录</el-button>
							</router-link>
						</center>
					</div>
				</div>
				
			</el-dialog>

			<reg-footer></reg-footer>
		</div>
	</div>
</template>

<script>
	import regFooter from "./components/com-footer";
	import {
		register
	} from "@/api/common.api";
	import {
		validateEmail,
		validatePhonenumber
	} from "@/validations/validate"
	import {
		logout
	} from '@/api/admin.api'
	import {
		getPurchaserOrgAll
	} from '@/api/mall.api'
	import {
		insertTUser
	} from '@/api/admin.api'
	export default {
		data() {
			// 传真号验证
			const validatFax = (rule, value, callback) => {
				if (!value) {
					return callback()
				}
				if (value) {
					const reg = /^(\d{3,4}-)?\d{7,8}$/
					if (!reg.test(value)) {
						return callback(new Error("传真号码 '区号-传真号码'"))
					} else {
						return callback()
					}
				}
			}
			// 验证座机
			const validateTel = (rule, value, callback) => {
				if (!value) {
					return callback()
				}
				if (value) {
					const reg = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/ //座机
					if (!reg.test(value)) {
						return callback(new Error("座机格式'区号-座机号码'"))
					} else {
						return callback()
					}
				}
			}
			return {
				form: {
					name: '',
					account: '',
					password: '',
					UKEY: '',
					email: '',
					tel: '',
					fax: '',
					mobile: ''
				},
				dialogVisible2: false,
				tabIndex: 1,
				purchaserOrgAll: [],
				rules: {
					account: [{
							required: true,
							message: "请您输入用户名",
							trigger: "blur"
						},
						{
							min: 2,
							max: 50,
							message: '长度在 2 到 50 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: "请您输入密码",
							trigger: "blur"
						},
						{ pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,64}$/, message: '密码必须（大小字母+数字+特殊字符）三者以上混合8位', trigger: 'blur' }
					],
					name: [{
							required: true,
							message: "请您输入姓名",
							trigger: "blur"
						},
						{
							min: 2,
							max: 32,
							message: '长度在 2 到 32 个字符',
							trigger: 'blur'
						}
					],
					email: [{
							required: true,
							message: "请您输入电子邮箱",
							trigger: "blur"
						},
						{
							validator: validateEmail,
							message: "请您输入正确的电子邮箱",
							trigger: "blur"
						}
					],
					mobile: [{
							required: true,
							message: "请您输入手机号码",
							trigger: "blur"
						},
						{
							validator: validatePhonenumber,
							message: "请您输入正确的手机号码",
							trigger: "blur"
						}
					],
					tel: [{
						validator: validateTel,
						trigger: 'blur'
					}],
					fax: [{
						validator: validatFax,
						trigger: 'blur'
					}]
				},
			};
		},
		components: {
			regFooter,
		},
		created() {
			this.logout()
			// this.getPurchaserOrgAllFn()
		},
		methods: {
			goLogin() {
				this.$router.push({
					path: "login"
				})
			},
			changeNav(t) {
				this.tabIndex = t;
			},
			getPurchaserOrgAllFn() {
				getPurchaserOrgAll()
					.then((response) => {
						this.purchaserOrgAll = response
					})
			},
			// 注册事件
			registerEvent() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						insertTUser(this.form).then(res => {
							if(res){
								console.log(res,'res');
								this.$confirm('注册成功', '提示', {
								  confirmButtonText: '去登录',
								  showCancelButton: false,
								  type: 'success',
								  center: true
								}).then(() => {
								  this.$router.push('/login')
								})
							}
							// this.dialogVisible2 = true;
							// console.log(res,'res');
							// this.$confirm('注册成功', '提示', {
							//   confirmButtonText: '去登录',
							//   showCancelButton: false,
							//   type: 'success',
							//   center: true
							// }).then(() => {
							//   this.$router.push('/login')
							// })
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			downloadFile() {
				window.open("/admin/static/授权委托书.docx")
			},
			closeIt() {
				this.dialogVisible2 = false;
			},
			// 退出当前登录
			logout() {
				const userId = this.$tools.localRead("userId")
				if (userId) {
					this.$store.state.app.tags = []
					const user_token = this.$tools.localRead('user_token')
					logout(user_token)
					localStorage.clear()
				}
			}
		},
	};
</script>

<style scoped lang='scss'>
	.register {
		min-height: 100%;
		background: #fff;

		.header {
			margin-bottom: 50px;
			height: 110px;
			background: url(~@/assets/mall-images/headbg.jpg) repeat-x left bottom;

			.logo-con {
				width: 1200px;
				margin: 0 auto;

				.logo {
					width: 260px;
					/* height: 50px; */
					margin-top: 30px;
					background: url(~@/assets/shoping-logo.png) no-repeat;
					background-size: 100% 100%;
				}

				.logo-title {
					height: 34px;
					line-height: 34px;
					font-size: 24px;
					color: #333;
					margin: 34px 0 0 18px;
				}
			}
		}

		&-body {
			width: 1200px;
			margin: 0 auto;
		}

		.action {
			text-align: center;

			.submit {
				padding: 16px 80px;
			}
		}

		.login {
			margin: 20px auto 140px;
			text-align: center;

			a {
				color: #999;
			}
		}
	}

	.typeView {
		width: 260px;
		margin: 20px auto;
		margin-top: 0px;
		overflow: hidden;

		.item {
			width: 130px;
			padding: 10px 0px;
			float: left;
			text-align: center;
			cursor: pointer;
		}

		.active {
			border-bottom: 2px solid #FF0000;
		}
	}
	
		.introduce {
			width: 700px;
			margin: 0 auto;
		}
	
		.title {
			text-align: center;
			font-weight: bold;
			font-size: 20px;
		}
	
		.content {
			margin-top: 20px;
			font-size: 16px;
			text-indent: 2em;
			line-height: 30px;
		}
		.center{
			text-align: center;
		}
</style>